
<%@ page import="com.afb.HHPredJob" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'HHPredJob.label', default: 'HHPredJob')}" />
        <title><g:message code="default.show.label" args="[entityName]" /></title>
        
<style type="text/css">

* {margin:0; padding:0}
/*
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF}
*/
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}



</style>

<script type="text/javascript">

var tooltip=function(){
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();

</script>

<script type="text/javascript">
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide";
	}
}

</script>

<script type="text/javascript" src="${createLinkTo(dir:'js',file:'jquery-1.4.3.js')}">
</script>
<script type="text/javascript">
$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>


    </head>
    <body>

<!--
<p id="text">Lorem ipsum dolor sit amet, <span class="hotspot" onmouseover="tooltip.show('Testing 123 <strong>Testing 123</strong>');" onmouseout="tooltip.hide();">consectetuer adipiscing</span> elit. Aliquam id tellus. Nulla orci enim, vulputate et, pharetra eget, imperdiet non, sem. Mauris sit amet mi nec nulla porttitor dapibus. Curabitur leo sem, lacinia sed, commodo eu, mattis sit amet, felis. Ut tortor. Donec <span class="hotspot" onmouseover="tooltip.show('Testing 123<br />Testing 123');" onmouseout="tooltip.hide();">porttitor orci</span> et neque. Curabitur eget diam at libero egestas suscipit. In tortor est, ullamcorper eu, dapibus et, condimentum nec, nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel <span class="hotspot" onmouseover="tooltip.show('<img src=\'images/x_icon.gif\'/>');" onmouseout="tooltip.hide();">purus eget diam</span> aliquam luctus. Nullam risus ipsum, aliquam et, lacinia sit amet, fermentum vel, mi. In hac habitasse platea dictumst. Maecenas et dui non tortor lobortis feugiat. Donec eleifend iaculis arcu. Cras vitae leo nec nunc rhoncus laoreet. Integer eget enim. Nunc <span class="hotspot" onmouseover="tooltip.show('<strong>Lorem ipsum dolor sit amet</strong><br />Consectetuer adipiscing elit. Praesent lacinia, dui ut consequat bibendum, lorem dolor tristique tellus, at faucibus nibh est in orci. In pede.');" onmouseout="tooltip.hide();">dignissim cursus</span> mi. Donec eros.</p>

-->
        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>

            <span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>
<!--
            <span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
-->
        </div>


        <div class="body">


            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>

<div id="tabs" class="container">

            <h1>${fieldValue(bean: HHPredJobInstance, field: "name")}</h1>

        <g:if test="${HHPredJobInstance.status != 'processing'}">
            <b><g:message code="default.search.label" />  </b><span class="hotspot" onmouseover="tooltip.show('<strong>Insert query terms</strong><br />Insert query terms comma separated. <BR/> For Example: \'Tubulin,FtsZ\'');" onmouseout="tooltip.hide();">?</span>

            <g:form action="search" method="post" id="${HHPredJobInstance.id}">
                <g:textField name="search" value="${params.search}" size="150"/>
                <input type="submit" value="Search" />
            </g:form>

        </g:if>

<br/>
    <ul class="tabs">
      <li><a href="#tab2">Processes</a></li>
        <li><a href="#tab1">Configurations</a></li>
    </ul>
    <div class="tab_container">

        <div id="tab2" class="tab_content">
<!--
            <h2>Processes</h2>
-->
<br/>
            <div class="list">
                <table>
                    <thead>
                        <tr>
<!--
                            <g:sortableColumn property="id" title="${message(code: 'Process.id.label', default: 'Id')}" />
-->

<!--
                            <g:sortableColumn property="input" title="${message(code: 'Process.input.label', default: 'Input')}" />
-->

                            <g:sortableColumn property="name" title="${message(code: 'Process.name.label', default: 'Name')}" />

                            <g:sortableColumn property="description" title="${message(code: 'Process.description.label', default: 'Description')}" />

                            <g:sortableColumn property="status" title="${message(code: 'Process.status.label', default: 'Status')}" />
<!--
                            <g:sortableColumn property="input" title="${message(code: 'Process.input.label', default: 'Input')}" />

                            <g:sortableColumn property="output" title="${message(code: 'Process.output.label', default: 'Output')}" />
-->



                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${processInstanceList}" status="i" var="processInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<!--
                            <td><g:link action="process" id="${processInstance.id}">${fieldValue(bean: processInstance, field: "id")}</g:link></td>
-->

                            <td><g:link action="process" id="${processInstance.id}">${fieldValue(bean: processInstance, field: "name")}</g:link></td>
<!--
                            <td>${fieldValue(bean: processInstance, field: "name")}</td>
-->
                            <td>${fieldValue(bean: processInstance, field: "description")}</td>

<td>
<g:if test="${processInstance.status=='queued'}">
  <font color="blue">${fieldValue(bean: processInstance, field: "status")}
</font>
</g:if>
<g:if test="${processInstance.status=='processing'}">
  <font color="yellow">${fieldValue(bean: processInstance, field: "status")}
</font>
</g:if>
<g:if test="${processInstance.status=='finished'}">
     <font color="green">${fieldValue(bean: processInstance, field: "status")}
</font>
</g:if>
<g:if test="${processInstance.status=='error'}">
  <font color="red">${fieldValue(bean: processInstance, field: "status")}
<!--
    <g:link controller="HHPredJob" action="retry" id="${processInstance.id}">cxRetry</g:link>
-->
</font>
</g:if>
                            </td>
<!--
                            <td>${fieldValue(bean: processInstance, field: "input")}</td>
--->
<!--
                            <td><g:link action="input" id="${processInstance.id}">View</g:link></td>

                            <td><g:link action="output" id="${processInstance.id}"><g:if test="${processInstance.output != ''}">View</g:if></g:link></td>
-->



                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div>
<!--
            <div class="paginateButtons">
                <g:paginate total="${processInstanceTotal}" />
            </div>
-->

        </div>

        <div id="tab1" class="tab_content">
<!--
            <h2>Job</h2>
-->
<br/>

            <div class="dialog">
                <div class="tabberlive">

			<div id="barratitulo" class="barra" style="background-color:#F8F8F8;text-align:left;padding-left:20px">
                          <label>Description </label>
			</div>

                   <div class="tabbertab">
                <table>
                    <tbody>
                    

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.name.label" default="Name" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "name")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.description.label" default="Description" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "description")}</td>

                        </tr>
                        </tbody>
                   </table>
                   </div>
<br/>

			<div id="barratitulo" class="barra" style="background-color:#F8F8F8;text-align:left;padding-left:20px">
                          <label>Options </label>
			</div>


                   <div class="tabbertab">

                <table>
                    <tbody>
                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.proteinSequences.label" default="Protein Sequences" /></td>
<!--
                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "proteinSequences")}</td>
-->
                            <td valign="top" class="value">
<!--
                            <g:textArea readonly id="styled" name="proteinSequences" cols="100" rows="10" value="${HHPredJobInstance?.proteinSequences}"/>
-->
                            <textArea id="styled" name="proteinSequences" cols="100" rows="10" value="" readonly>${HHPredJobInstance?.proteinSequences}</textArea>
                            </td>


                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.hmmDatabases.label" default="Hmm Databases" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "hmmDatabases")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.maxPsiBlastIterations.label" default="Max Psi Blast Iterations" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "maxPsiBlastIterations")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.scoreSecondaryStructure.label" default="Score Secondary Structure" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "scoreSecondaryStructure")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.alignmentMode.label" default="Alignment Mode" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "alignmentMode")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.realignWithMac.label" default="Realign With Mac" /></td>

                            <td valign="top" class="value"><g:formatBoolean boolean="${HHPredJobInstance?.realignWithMac}" /></td>

                        </tr>

                        
  </tbody>
</table>
</div>

</div>


<br/>
			<div id="barra" class="barra" style="background-color:#ff9900;text-align:left;padding-left:20px">
                          <label> More options </label><a id="displayText" href="javascript:toggle();"> Show</a>
			</div>
<br/>

<div id="toggleText" style="display: none">


  <br/>

			<div id="barratitulo" class="barra" style="background-color:#F8F8F8;text-align:left;padding-left:20px">
                          <label>More Options </label>
			</div>


                   <div class="tabbertab">


  <table>
<tbody>
                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.eValueThresholdPsiBlast.label" default="E-Value Threshold Psi Blast" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "eValueThresholdPsiBlast")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.minCoveragePsiBlastHits.label" default="Min Coverage Psi Blast Hits" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "minCoveragePsiBlastHits")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.minSequenceIdentityOfPsiBlastHitsWithQuery.label" default="Min Sequence Identity Of Psi Blast Hits With Query" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "minSequenceIdentityOfPsiBlastHitsWithQuery")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.macRealignmentThreshold.label" default="Mac Realignment Threshold" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "macRealignmentThreshold")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.compositionalBiasCorrection.label" default="Compositional Bias Correction" /></td>

                            <td valign="top" class="value"><g:formatBoolean boolean="${HHPredJobInstance?.compositionalBiasCorrection}" /></td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.showSequencesPerHMM.label" default="Show Sequences Per HMM" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "showSequencesPerHMM")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.widthOfAlignments.label" default="Width Of Alignments" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "widthOfAlignments")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.minProbabilityInHitList.label" default="Min Probability In Hit List" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "minProbabilityInHitList")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.maxNumberOfHitsInHitList.label" default="Max Number Of Hits In Hit List" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "maxNumberOfHitsInHitList")}</td>

                        </tr>


<g:ifUserHasRole roles="Administrator">
                            <tr class="prop">
</g:ifUserHasRole>
<g:ifUserHasRole roles="Registered">
                            <tr id="notvisible" class="prop">
</g:ifUserHasRole>
                            <td valign="top" class="name"><g:message code="HHPredJob.user.label" default="User" /></td>

                            <td valign="top" class="value"><g:link controller="user" action="show" id="${HHPredJobInstance?.user?.id}">${HHPredJobInstance?.user?.encodeAsHTML()}</g:link></td>

                        </tr>

                    </tbody>
                </table>
  </div>
  </div>

            </div>



        </div>


      </div>

    </div>
&nbsp;
</div>

    </body>
</html>
